<!--
小结
1. 插值表达式{{}}
2. v-cloak可以保持和元素实例的关联，直到结束编译后自动消失
3. v-html可以实现element.innerHTML的作用
4. v-text和v-html类似，不过是以纯文本显示，和element.innerText作用一样
5. v-bind:将数据从 M 绑定到 V,绑定元素属性
6. v-on: 绑定元素的方法，可以用缩写@
7. =>函数让函数内部的this和外部的this指向相同的对象
8. 事件修饰符
    .stop 阻断冒泡
    .once 事件只执行一次
    .self 只执行响应当前事件
    .capture 开启捕获机制
    .prevent 阻断默认行为
9. v-model可以实现数据的双向绑定,只能应用于表单元素
10. eval 函数有被注入的风险
11. v-for 遍历 数字、普通数组、对象数组、对象属性
12. v-for 在使用的时候要给对应的标签添加 key 属性
13. v-if 和 v-show 都可以起到是否让元素显示的效果，所不同的是
    v-if采用的是 删除 添加 的方法，
    v-show采用的修改display属性值的方式。 display:none
14. 不可以将 body 的 id 设置成 app, 在vue的当前版本中不支持这种方式


-->


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue.js"></script>
</head>
<body style="background-color: black">
    <div id="app">
        <p v-for="item in list" v-html="item"></p>
    </div>
    <script>
        var vm=new Vue({
            el:"#app",
            data:{
                list:[
                    "1. 插值表达式{{}}",
                    "2. v-cloak可以保持和元素实例的关联，直到结束编译后自动消失",
                    "3. v-html可以实现element.innerHTML的作用",
                    "4. v-text和v-html类似，不过是以纯文本显示，和element.innerText作用一样",
                    "5. v-bind:将数据从 M 绑定到 V,绑定元素属性",
                    "6. v-on: 绑定元素的方法，可以用缩写@",
                    "7. =>函数让函数内部的this和外部的this指向相同的对象",
                    "8. 事件修饰符",
                    "   &emsp;.stop 阻断冒泡",
                    "   &emsp;.once 事件只执行一次",
                    "   &emsp;.self 只执行响应当前事件",
                    "   &emsp;.capture 开启捕获机制",
                    "   &emsp;.prevent 阻断默认行为",
                    "9. v-model可以实现数据的双向绑定",
                    "10. eval 函数有被注入的风险",
                    "11. v-for 遍历 数字、普通数组、对象数组、对象属性",
                    "12. v-for 在使用的时候要给对应的标签添加 key 属性",
                    "13. v-if 和 v-show 都可以起到是否让元素显示的效果，所不同的是",
                    "   &emsp;v-if采用的是 删除 添加 的方法",
                    "   &emsp;v-show采用的修改display属性值的方式。 display:none",
                    "14. 不可以将 body 的 id 设置成 app, 在vue的当前版本中不支持这种方式",
                ]
            },
        })
    </script>
</body>
</html>